<template>
  <div>
    <div class="px-3">
      <el-tag type="info" effect="plain" closable class="mr-3 mb-2" :class="{active:index == num}"
              @click="changes(index)" @close="delTag(index)"
              v-for="(item, index) in tagList" :key="index">{{ item }}
      </el-tag>
    </div>

    <div class="d-flex p-3" style="height: 300px;">
      <div class="shadow rounded-lg mr-4 p-3" style="width: 150px;">
        <div class="d-flex justify-content-between py-2 pointer" v-for="(item, index) in tagSelectList" :key="index"
             @click="tagSelectIndexChange(index)">
          <div :class="tagSelectIndex == index ? 'text-primary' : ''">{{ item }}</div>
          <i class="el-icon-arrow-right text-primary" v-if="tagSelectIndex == index"></i>
        </div>
      </div>

      <div class="shadow rounded-lg col over-auto p-3">
        <div class=" " v-if="tagSelectIndex == 0">
          <el-select @change="moudleChange" size="mini" v-model="moudle" placeholder="请选择设备模型"
                     style="width: 100%;margin-bottom: 5px;">
            <el-option v-for="item in modelList" :key="item.modelCode" :label="item.modelName" :value="item.modelCode">
            </el-option>
          </el-select>
          <el-button size="mini" v-for="(item, index) in modelListParams"
                     @click="pushString('0', item.parValue, item.parKey)" class="ml-0 mr-3 mb-3" style="width: 100%;">{{
            item.parValue
            }}
          </el-button>
        </div>
        <div class=" " v-if="tagSelectIndex == 1">
          <el-select @change="valueChange" size="mini" v-model="value" placeholder="请选择设备模型值"
                     style="width: 100%;margin-bottom: 5px;">
            <el-option v-for="item in modelList" :key="item.modelCode" :label="item.modelName" :value="item.modelCode">
            </el-option>
          </el-select>
          <el-button size="mini" v-for="(item, index) in modelListValueParams"
                     @click="pushString('1', item.parValue, item.parKey)" class="ml-0 mr-3 mb-3" style="width: 100%;">{{
            item.parValue
            }}
          </el-button>
        </div>
        <div class=" over-auto" v-if="tagSelectIndex == 2">
          <el-button size="mini" v-for="(item, index) in symbolList" @click="pushString('2', item)"
                     class="ml-0 mr-3 mb-3"
                     style="width: 118px;">{{ item }}
          </el-button>

        </div>
        <div class=" " v-if="tagSelectIndex == 3">
          <el-input size="mini" type="textarea" placeholder="请输入" v-model="tagInput"
                    @blur="pushString('3', tagInput)"></el-input>
        </div>
        <div class=" " v-if="tagSelectIndex == 4">
          <el-time-picker
            v-model="timeValue1"
            size="mini"
            @blur="pushString('4', timeValue1)"
            value-format="HH:mm:ss"
            style="width: 188px;margin-bottom: 10px;"
            :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
    }"
            placeholder="任意时间点">
          </el-time-picker>
          <el-date-picker size="mini" v-model="timeValue" type="datetime" placeholder="选择日期时间"
                          value-format="yyyy-MM-dd HH:mm:ss" @blur="pushString('4', timeValue)"
                          style="width: 188px;margin-bottom: 10px;">
          </el-date-picker>
          <el-button size="mini" @click="pushString('4', 'SYS_TIME')" class="ml-0 mr-3 mb-3" style="width: 188px;">
            系统时间
          </el-button>
          <el-button size="mini" @click="pushString('4', 'SYS_TIME_HMS')" class="ml-0 mr-3 mb-3" style="width: 188px;">
            系统时间(时分秒)
          </el-button>
        </div>
      </div>
    </div>
    <div style="width: 100%; text-align: center;" v-if="$route.query.type != 2">
      <el-button type="primary" @click="saveLogic">保存</el-button>
      <!-- <el-button type="primary" @click="saveLogic">保存</el-button> -->
    </div>
  </div>
</template>

<script>
  import { queryDeviceModelParamList, queryDeviceModelList, queryDeviceModelParamValueList } from "@/api/workflow/index"

  export default {
    data() {
      return {
        tagInput: "",
        symbolList: ["(", ")", "+", "-", "*", "/", ">", "<", "==", "&&", "||"],
        modelListParams: [],
        modelListValueParams: [],
        tagSelectList: ["设备模型参数", "设备模型参数值", "符号", "输入框", "时间选择"],
        tagSelectIndex: 0,
        mapString: [],
        tagList: [],
        modelList: [],
        value: "",
        moudle: "",
        timeValue: "",
        timeValue1: "",
        num: null
      }
    },
    props: {
      capList: {
        type: Array,
        default: []
      }
    },
    mounted() {
      if (this.capList) {
        let data = this.capList
        this.mapString = data
        data.forEach(element => {
          this.tagList.push(element.seqValueDes)
        })
      }
      this.getDeviceModelList()
    },
    methods: {
      pushString(type, val, code) {
        if (this.num != null) {
          this.tagList.splice(this.num, 1, val)
          this.mapString.splice(this.num, 1, {
            type: type,
            seqValue: code ? code : val,
            seqValueDes: val
          })
          this.num = null
        } else {
          this.tagList.push(val)
          this.mapString.push({
            type: type,
            seqValue: code ? code : val,
            seqValueDes: val
          })
        }
      },
      delTag(index) {
        this.tagList.splice(index, 1)
        this.mapString.splice(index, 1)
      },
      changes(key) {
        this.num = key
      },

      async getDeviceModelList() {
        const res = await queryDeviceModelList()
        if (res.status == 200) {
          this.modelList = res.object
        }
      },
      tagSelectIndexChange(index) {
        this.tagSelectIndex = index
      },
      moudleChange(val) {
        this.getDeviceModelParamList(val)
      },
      valueChange(val) {
        this.getDeviceModelParamValueList(val)
      },
      async getDeviceModelParamList(val) {
        const res = await queryDeviceModelParamList({
          modelCode: val
        })
        if (res.status == 200) {
          this.modelListParams = res.object
        }
      },
      async getDeviceModelParamValueList(val) {
        const res = await queryDeviceModelParamValueList({
          modelCode: val
        })
        if (res.status == 200) {
          this.modelListValueParams = res.object
        }
      },
      saveLogic() {
        this.$emit("saveQZTJ", this.mapString)
      }
    }
  }
</script>


<style scoped>
  .active {
    background-color: #00557F;
    color: #fff;
  }
</style>
